<template>
	<view id="shopCar">
		<!-- 背景半椭圆 -->
		<view id="background-top" />
		
		<!-- 头部搜索框 -->
		<view class="header">
			<uni-row>
					<uni-col :span="20">
						<uni-search-bar class="searchBar" placeholder="请输入搜索内容" :radius="200" @confirm="toSearch" v-model="searchValue"
							clearButton="auto" cancelButton="none"/>
					
					</uni-col>
					<uni-col :span="4">
						<view class="consult" @click="isManagement=!isManagement">
							<uni-icons type="settings" size="16px" color="white"></uni-icons>
							<text class="consult_text">{{isManagement?'完成':'管理'}}</text>
						</view>
					</uni-col>
				</uni-row>
		</view>
		
		<!-- 购物列表板块 -->
		<view class="shopCar-list">
			
			<!-- 购物列表单例 -->
			<view class="shopCar-item" v-for="(item,index) in shopCar.list">
				<!-- 多选框 -->
				<view class="item-checkbox">
					<radio :value="item.shopName+index" :checked="item.checked" @click.prevent="toChecked(index)" color="#E43D33"/>
				</view>
				
				<!-- 图片 -->
				<view class="item-img">
					<image :src="'../../static/img/goods/'+item.src" mode="aspectFill"></image>
				</view>
				<!-- 商品介绍 -->
				<view class="item-main">
					
					<view class="shop-name">
						{{item.shopName}}
					</view>
					
					<view class="shop-introduction">
						{{item.shopIntroduction}}
					</view>
					
					<!-- 商品操作 -->
					<view class="item-operate">
						<!-- 商品价格 -->
						<view class="shop-price">
							售价
							<text class="price-text">￥{{item.unitPrice}}</text>
						</view>
						<!-- 商品数目操作 -->
						<view class="shop-number">
							<uni-number-box v-model="item.selectNum" :min="1" background="#f2f2f2"/>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 购物车下单栏 -->
		<view class="footer">
			<view class="select-all" >
				<radio value="全选" :checked="shopCar.isSelectAll" @click.prevent="toCheckedAll(index)" color="#E43D33"/>
				全选
			</view>
			<!-- 下单板块 -->
			<view class="place-order" v-if="!isManagement">
				<view class="all-prices">
					总价<text class="prices-text">￥{{orderInfo.totPrices}}</text>
				</view>
			
				<view class="order-button" @click="placeOrder">
					结算({{orderInfo.allNum}})
				</view>
			</view>
			
			<!-- 管理板块 -->
			<view class="management" v-else>
				<view class="delete-button" @click="deleteShopCarList">
					删除所选({{orderInfo.allNum}})
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索框
				searchValue:"",
				
				// 管理（management） && 使用(use)状态切换
				 isManagement:false,
				
				// 购物车列表
				shopCar:{
					list:[
						{shopName:'中华红血橙',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121238.jpg',checked:false},
						{shopName:'海南贵妃芒大果/核薄如卡，肉质细腻',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121232.jpg',checked:false},
						{shopName:'【新化蛮有味】湘蚩味剁椒蒜头500g',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121227.jpg',checked:false},
						{shopName:'湘西手工豆皮（240g/袋）',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121220.jpg',checked:false}
						// {shopName:'中华红血橙',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121238.jpg',checked:false},
						// {shopName:'中华红血橙',shopIntroduction:'中华红血橙大果（75-85MM）',unitPrice:'32.80',selectNum:1,src:'20220405121238.jpg',checked:false}
					],
					selectList:[],
					isSelectAll:false,
					lock:false
				},
				
				// 弹出窗信息
				popupInfo:{
					type:'warn',
					title:'',
					content:'',
					confirm: ()=>{},
					close: ()=>{}
				}
			}
		},
		computed:{
			// allSelectNum
			orderInfo(){
				let allNum=0;
				let totPrices=0;
				this.shopCar.list.forEach((item)=>{
					if(item.checked){
						allNum+=item.selectNum;
						totPrices+=item.selectNum*item.unitPrice;
					}
					
				});
				return {allNum,totPrices:totPrices.toFixed(2)};
			}
		},
		methods: {
			// 搜索框
			toSearch(){
				
			},
			
			
			// 商品选择
			toChecked(index,checkLock=true){
				if(checkLock && this.shopCar.lock) return;
				this.shopCar.lock=true;
				
				let item=this.shopCar.list[index];
				let oldState=item.checked;
				if(oldState){
					// 当前已选，要求未选
					let location=this.shopCar.selectList.indexOf(item.shopName);
					this.shopCar.selectList.splice(location,1);
					item.checked=false;
				}else{
					// 当前未选，要求已选
					this.shopCar.selectList.push(item.shopName);
					item.checked=true;
					
				}
				
				this.shopCar.lock=false;	
			},
			// 商品全选
			toCheckedAll(){
				if(this.shopCar.lock) return;
				this.shopCar.lock=true;
				
				if(this.shopCar.isSelectAll){
					// 当前已全选，需求全未选
					this.shopCar.list.forEach((item,index)=>{
						if(item.checked){
							this.toChecked(index,false);
						}
					})
					this.shopCar.isSelectAll=false;
				}else{
					// 当前未全选，需求全全选
					this.shopCar.list.forEach((item,index)=>{
						if(!item.checked){
							this.toChecked(index,false);
						}
					})
					this.shopCar.isSelectAll=true;
				}
				
				this.shopCar.lock=false;	
			},
			
			// 购物车删除
			deleteShopCarList(){
				if(this.orderInfo.allNum==0) return;
				if(this.shopCar.lock) return;
				this.shopCar.lock=true;
				
				uni.showModal({
					title: '提示',
					content: '确认删除所选商品',
					success: (res) =>{
						
						// 删除操作
						if (res.confirm) {
							let list=this.shopCar.list;
							for(let i=list.length-1;i>=0;i--){
								if(list[i].checked){
									let localtion=this.shopCar.selectList.indexOf(list[i].shopName);
									if(localtion!==-1){
										list.splice(i,1);
										this.shopCar.selectList.splice(localtion,1);
									}
								}
							}
							// 删除提示
							uni.showToast({
								title: '删除成功',
								duration: 1500
							});
						}
						
					}
				});
				this.shopCar.lock=false;
			},
			
			// 下单操作
			placeOrder(){
				// if(this.orderInfo.allNum==0) return;
				if(this.shopCar.lock) return;
				this.shopCar.lock=true;
				
				// 暂未开发
				uni.showToast({
					title: '此功能暂未开发',
					icon:'none',
					duration: 2000
				});
				
				this.shopCar.lock=false;
			}
		}
	}
</script>

<style lang="scss" scoped>
#background-top{
		margin: 0!important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background-color: #ec3525;
		// border-radius: 0 0 30% 30%;
		z-index: -10;
	}
	
	#shopCar{
		>view{
			padding: 0 5px;
		}
		
		// 购物列表
		.shopCar-list{
			margin: 35px 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			// 单例
			.shopCar-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 5px;
				padding: 10px;
				background-color: #fff;
				// border-radius: 5px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
				
				// 多选框
				.item-checkbox{
				}
				// 图片
				.item-img{
					width: 80px;
					height: 80px;
					border-radius: 5px;
					overflow: hidden;
					margin-right: 10px;
					>image{
						width: 80px;
						height: 80px;
					}
				}
				
				// 商品介绍
				.item-main{
					display: flex;
					flex-direction: column;
					width: calc(100% - 80px - 40px);
					
					.shop-name{
						font-size: 16px;
						color: #3a3a3a;
						font-weight: bold;
						// 单行显示
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					.shop-introduction{
						width: 100%;
						font-size: 12px;
						margin: 5px 0;
						color: #909399;
						// 单行显示
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					.item-operate{
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.shop-price{
							display: flex;
							align-items: center;
							font-size: 12px;
							color: #909399;
							
							.price-text{
								font-size: 14px;
								color: #e1251b;
							}
						}
					}
					
				}
			}
		}
	
		// 购物车下单栏
		.footer{
			position: fixed;
			bottom: 0;
			z-index: 20;
			width: 100%;
			height: 45px;
			background-color: #fff;
			box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10px;
			padding-right: 0;
			
			.select-all{
				display: flex;
				align-items: center;
				font-size: 14px;
			}
			
			// 下单板块
			.place-order{
				display: flex;
				align-items: center;
				
				.all-prices{
					margin-right: 10px;
					font-size: 13px;
					color: #909399;
					.prices-text{
						font-size: 18px;						color: #e1251b;
					}
				}
				
				.order-button{
					height: 45px;
					line-height: 45px;
					padding: 0 10px;
					color: white;
					font-size: 18px;
					background-color: #ec3525;
				}
			}
			
			// 管理板块
			.management{
				.delete-button{
					height: 45px;
					line-height: 45px;
					padding: 0 10px;
					color: #E43D33;
					background-color: #fff;
					font-size: 18px;
				}
			}
		}
	}

</style>


<style lang="scss">
	#shopCar{
		.header{
			font-size: 14px;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #ec3525;
			z-index: 20;
			
			// 搜索框边框
			.uni-searchbar{
				padding: 0;
			}
			// 搜索框box
			.uni-searchbar__box{
				height: 30px;
			}
			
			// 咨询按钮
			.consult {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				font-weight: bold;
			}
		}
	
		.shopCar-list{
			.item-checkbox{
				.checklist-box{
					margin-right: 0;
				}
			}
		}
	
	}
</style>